<template>
	<div >
	    <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media" v-for="item in newslist" :key="item.id">
                <router-link :to="'/home/newsinfo/' + item.id">
                    <img class="mui-media-object mui-pull-left" :src="item.img_url">
                    <div class="mui-media-body">
                        <h1>{{ item.title }}</h1>
                        <p class='mui-ellipsis'>
                            <span>发表时间：{{ item.add_time | dateFormat}}</span>
                            <span>点击：{{ item.click }}次</span>
                        </p>
                    </div>
                </router-link>
            </li>   
        </ul>
	</div>
</template>

<script>
export default {
    data() {
        return {
            newslist: []
        };
    },
    created() {
        this.getNewslist();
	},
    methods: {
        getNewslist() {
            this.newslist = 
            [
                {
                "id": 1,
                "title": "title1",
                "add_time": "2019-01-01T01:01:01.000Z",
                "brief": "brief1",
                "click": 1,
                "img_url": "https://tse3-mm.cn.bing.net/th?id=OIP.a4uGBQV55c7ydMzwOda55AHaHa&w=204&h=204&c=7&o=5&pid=1.7",
                'img': require('../../images/c1.jpg')
                },
                {
                    "id": 2,
                    "title": "title2",
                    "add_time": "2019-02-02T12:03:01.000Z",
                    "brief": "brief2",
                    "click": 5,
                    "img_url": ""
                },
                {
                    "id": 3,
                    "title": "title3",
                    "add_time": "2019-03-05 16:21:19",
                    "brief": "brief3",
                    "click": 6,
                    "img_url": "https://tse1-mm.cn.bing.net/th?id=OIP.VBDA6rELvcC2X9hn_JiT0wHaHa&w=212&h=213&c=7&o=5&pid=1.7"
                },
                {
                    "id": 4,
                    "title": "title4",
                    "add_time": "2019-03-12 10:01:09",
                    "brief": "brief4",
                    "click": 3,
                    "img_url": "https://tse2-mm.cn.bing.net/th?id=OIP.LB-N290Krt3gxZ6ixr5rNwHaHh&w=216&h=215&c=7&o=5&pid=1.7"
                },
                {
                    "id": 5,
                    "title": "title5",
                    "add_time": "2019-03-15 01:05:21",
                    "brief": "brief5",
                    "click": 7,
                    "img_url": "https://tse4-mm.cn.bing.net/th?id=OIP.GhV9WqMQlZjdR2e8Kqyk1QHaHa&w=215&h=215&c=7&o=5&pid=1.7"
                },
                {
                    "id": 6,
                    "title": "title6",
                    "add_time": "2019-04-01 09:08:17",
                    "brief": "brief6",
                    "click": 9,
                    "img_url": "https://tse3-mm.cn.bing.net/th?id=OIP.Isz0T8W4DsgtNFTU4dmhPAHaHa&w=215&h=215&c=7&o=5&pid=1.7"
                },
                {
                    "id": 7,
                    "title": "title7",
                    "add_time": "2019-04-01 12:01:59",
                    "brief": "brief7",
                    "click": 10,
                    "img_url": "https://tse1-mm.cn.bing.net/th?id=OIP.Vgy137cqI2guUHLIAlBLjAHaHa&w=197&h=197&c=7&o=5&pid=1.7"
                },
                {
                    "id": 8,
                    "title": "title8",
                    "add_time": "2019-04-05 06:18:01",
                    "brief": "brief8",
                    "click": 2,
                    "img_url": "https://tse1-mm.cn.bing.net/th?id=OIP.jJVWgoSGQQmNcsWrpkKhrgHaHa&w=198&h=197&c=7&o=5&pid=1.7"
                },
                {
                    "id": 9,
                    "title": "title9",
                    "add_time": "2019-04-10 06:07:09",
                    "brief": "brief9",
                    "click": 18,
                    "img_url": "https://tse2-mm.cn.bing.net/th?id=OIP.aLkq9ASvByN4bHbqWQoWrQHaHa&w=217&h=217&c=7&o=5&pid=1.7"
                },
                {
                    "id": 10,
                    "title": "title10",
                    "add_time": "2019-05-03 10:03:37",
                    "brief": "brief10",
                    "click": 26,
                    "img_url": "https://tse2-mm.cn.bing.net/th?id=OIP.zbYtJNE98XpEnAi8j7V6sgHaHa&w=198&h=197&c=7&o=5&pid=1.7"
                },
                {
                    "id": 11,
                    "title": "title11",
                    "add_time": "2019-05-09 13:08:29",
                    "brief": "brief11",
                    "click": 28,
                    "img_url": "https://tse4-mm.cn.bing.net/th?id=OIP.hCzmYNaxObiUXnWmhdi39AHaHa&w=216&h=217&c=7&o=5&pid=1.7"
                },
                {
                    "id": 12,
                    "title": "title12",
                    "add_time": "2019-05-10 01:10:56",
                    "brief": "brief12",
                    "click": 30,
                    "img_url": "https://tse2-mm.cn.bing.net/th?id=OIP.fqnPOXBOG5-uZuBMIprRzgHaHa&w=216&h=217&c=7&o=5&pid=1.7"
                },
                {
                    "id": 13,
                    "title": "title13",
                    "add_time": "2019-05-23 19:23:58",
                    "brief": "brief13",
                    "click": 19,
                    "img_url": "https://tse3-mm.cn.bing.net/th?id=OIP.4N97VcHnDD_TCXdM4iZn2QHaHa&w=211&h=212&c=7&o=5&pid=1.7"
                }
            ]
        }    
    }
}

</script>

<style lang="scss" scoped>
.mui-table-view {
    li {
        h1 {
            font-size: 14px;
        }
        .mui-ellipsis {
            font-size: 12px;
            color: #226aff;
            display: flex;
            justify-content: space-between;
        }
    }
}
</style>
